<template>
	<view class="page-container">
		<!-- 吸顶部分 -->
		<u-sticky>
			<view class="header-top-tabbar">
				<view class="header-top-left">
					<u-icon name="arrow-left" color="rgba(0, 0, 0, 1)" size="20" @click="onBack()"></u-icon>
				</view>
				<view class="header-top-center">
					我的蜂蜜记录
				</view>
				<view class="header-top-right"></view>
			</view>

			<view class="header-top-container">
				<view class="header-top-container-left">
					<view class="header-top-container-left-top">
						2980
					</view>
					<view class="header-top-container-left-bottom">
						蜂蜜有效期360天，记得使用呦~
					</view>
				</view>
				<view class="header-top-container-right">
					<view class="header-top-container-right-left">
						去兑换
					</view>
					<view class="header-top-container-right-right">
						<u-icon name="arrow-right" color="rgba(41, 41, 48, 1)" size="28rpx"></u-icon>
					</view>
				</view>
			</view>
		</u-sticky>

		<!-- 可滚动内容 -->
		<scroll-view class="scroll-content" scroll-y="true">
			<!-- 按月分类的记录列表 -->
			<view v-for="(monthRecords, month) in groupedRecords" :key="month">
				<!-- 月份标题 -->
				<u-sticky zIndex="99">
					<view class="month-header">
						{{ month }}
					</view>
				</u-sticky>
				<!-- 当月记录 -->
				<view class="record-list" v-show="!monthRecords.isCollapse">
					<view class="record-item" v-for="(record, index) in monthRecords" :key="index">
						<view class="record-content">
							<view class="record-text">
								{{ record.honeyTitle }}
							</view>
							<view class="record-time">
								{{ record.honeyTime }}
							</view>
						</view>
						<view class="record-amount">
							<text :class="{ 'positive': record.honeyMoney > 0, 'negative': record.honeyMoney < 0 }">
								{{ record.honeyMoney > 0 ? '+' : '' }}{{ record.honeyMoney }}
							</text>
							<image src="/static/index/checkin/honey.png" mode="widthFix"
								style="width: 36rpx; height: 36rpx; margin-left: 16rpx;"></image>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	import {
		HoneylistByHoney
	} from '@/request/api.js';
	export default {
		data() {
			return {
				// 假设这是从后台获取的数据
				records: [],
				groupedRecords: {} // 分组后的数据
			};
		},
		computed: {
			topBarStyle() {
				// #ifdef MP-WEIXIN
				if (this.$store.state.systemInfo.capsuleInfo.width > 0) {
					const paddingRight = this.$store.state.systemInfo.capsuleInfo.width + this.$store.state.systemInfo
						.capsuleRightPadding * 2;
					const paddingTop = this.$store.state.systemInfo.statusBarHeight + this.$store.state.systemInfo
						.capsuleRightPadding;


					return `padding:${paddingTop}px ${paddingRight}px 10rpx 30rpx;`;
				}
				// #endif
				// #ifdef APP-PLUS || H5
				return `padding-top: ${uni.getSystemInfoSync().statusBarHeight}px;`;
				// #endif
				return '';
			}
		},
		onLoad() {
			// 获取后台数据并进行分组
			this.groupRecordsByMonth();
		},
		methods: {
			onBack() {
				uni.navigateBack();
			},

			/**
			 * 根据日期将记录按月份分组
			 */
			groupRecordsByMonth() {
				let params = {
					userId: this.$store.state.userInfo.userId,
				}
				HoneylistByHoney(params).then(res => {
					if (res.data.code == 200) {
						const grouped = {};
						this.records = res.data.data.forEach(record => {
							// 解析日期字符串
							const date = new Date(record.honeyTime);
							const year = date.getFullYear();
							const month = date.getMonth() + 1; // 月份从1开始

							// 创建月份格式：YYYY年MM月
							const monthKey = `${year}年${month}月`;

							// 如果该月份不存在，则创建新数组
							if (!grouped[monthKey]) {
								grouped[monthKey] = [];
							}

							// 添加记录到对应月份
							grouped[monthKey].push(record);
						});

						// 按月份倒序排列（最新的在前面）
						this.groupedRecords = Object.keys(grouped)
							.sort((a, b) => {
								const [yearA, monthA] = a.split('年').map(Number);
								const [yearB, monthB] = b.split('年').map(Number);
								if (yearA !== yearB) {
									return yearB - yearA; // 新的在前
								}
								return monthB - monthA; // 新的在前
							})
							.reduce((obj, key) => {
								obj[key] = grouped[key];
								return obj;
							}, {});
					}
				})

			}
		}
	};
</script>

<style lang="scss" scoped>
	.page-container {
		background-color: #fff;
		height: 100vh;
		display: flex;
		flex-direction: column;
		background-image: url(/static/index/checkin/MissionCenterBgIMG.png);
		background-size: cover;
		background-repeat: no-repeat;
		background-position: center;
		-webkit-overflow-scrolling: touch;

		.header-top-tabbar {
			margin: 74rpx 30rpx 0;
			width: calc(100vw - 60rpx);
			height: 72rpx;
			line-height: 72rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative; // 改为relative而不是absolute

			.header-top-left {
				height: 56rpx;
				display: flex;
				z-index: 10; // 确保左右两侧内容在标题之上

				.header-top-left-image {
					width: 44rpx;
					height: 44rpx;
				}

				.header-top-left-titleImage {
					width: 200rpx;
					height: 56rpx;
				}
			}

			.header-top-center {
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(0, 0, 0, 1);
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%, -50%);
				white-space: nowrap;
				z-index: 5;
			}

			.header-top-right {
				min-width: 74rpx;
				z-index: 10; // 确保左右两侧内容在标题之上

				image {
					margin: 5rpx 0;
					width: 74rpx;
					height: 62rpx;
				}
			}
		}

		.header-top-container {
			height: 100rpx;
			margin: 36rpx 30rpx 0;
			display: flex;
			justify-content: space-between;
			align-items: center;

			.header-top-container-left {
				.header-top-container-left-top {
					color: rgba(0, 0, 0, 1);
					font-size: 50rpx;
					line-height: 50rpx;
					font-weight: bold;
				}

				.header-top-container-left-bottom {
					margin-top: 20rpx;
					color: rgba(77, 77, 86, 1);
					font-size: 24rpx;
					line-height: 26rpx;
					font-weight: 400;
				}
			}

			.header-top-container-right {
				width: 140rpx;
				height: 50rpx;
				line-height: 50rpx;
				background-color: rgba(255, 255, 255, 0.8);
				border-radius: 40rpx;
				text-align: center;
				color: rgba(0, 0, 0, 1);
				font-size: 26rpx;
				font-weight: 400;
				display: flex;
				align-items: center;
				justify-content: center;

				.header-top-container-right-left {}

				.header-top-container-right-right {
					width: 28rpx;
					height: 28rpx;
				}
			}
		}

		.scroll-content {
			overflow-y: auto;
			-webkit-overflow-scrolling: touch;
			background-color: #fff;
			height: calc(100vh - 172rpx);
			margin: 40rpx 0 0;
			border-top-right-radius: 30rpx;
			border-top-left-radius: 30rpx;
			padding: 40rpx 30rpx;
			width: calc(100vw - 60rpx);

			.month-header {
				font-size: 32rpx;
				font-weight: 700;
				color: rgba(0, 0, 0, 1);
				padding-bottom: 20rpx;
				display: flex;
				align-items: center;
				cursor: pointer;
				background-color: #fff;

				.month-header-icon {
					margin-left: 10rpx;
				}
			}

			.record-list {
				margin-bottom: 40rpx;
			}

			.record-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 20rpx 0;
				border-bottom: 1rpx solid rgba(244, 244, 244, 1);

				:last-child {
					border-bottom: none;
				}

				.record-content {
					flex: 1;
					overflow: hidden;


					.record-text {
						font-size: 28rpx;
						color: rgba(0, 0, 0, 1);
						font-weight: 500;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.record-time {
						font-size: 24rpx;
						color: rgba(77, 77, 86, 1);
						margin-top: 4rpx;
					}
				}

				.record-amount {
					display: flex;
					align-items: center;
					font-size: 36rpx;
					font-weight: 500;
					color: rgba(0, 0, 0, 1);

					.positive {
						color: #FF7E16;
					}

					.negative {
						color: #787882;
					}
				}
			}
		}
	}
</style>